<template>
	<view class="auto">
		<view class="content box box-tb box-align-center padd20" v-if="isToken && isTourist == false">
			<!-- <view class="" v-if="role!='tr'">
				<u-dropdown ref="uDropdown">
					<u-dropdown-item :title="className">
						<view class="slot-content" style="background-color: #FFFFFF;">
							<scroll-view scroll-y="true" style="height: 200rpx;">
								<view class="u-text-center u-content-color u-m-t-20 u-m-b-20"
									v-for="(item,index) in classList" :key="item.id" @click="changeClass(item)">
									{{item.bjmc}}</view>
							</scroll-view>
							<u-button type="primary" @click="closeDropdown">确定</u-button>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view> -->
			<view class="list" v-if="cous">
				<view class="list mt20" @click="goDetail(cous)">
					<u-image width="100%" height="253rpx" :src="cous.image"></u-image>
					<view class="cont padd20">
						<view class="title oh" style="font-size: 32rpx;font-weight: bold;width: 100%;">
							{{cous.name||''}}
						</view>
						<view class="box box-pack-between box-align-center mt20"
							style="color: #BBBDC2;font-size: 24rpx;">
							<view class="">
								共{{cous.stageCnt||`0`}}章 {{cous.sectionCnt||`0`}}节
							</view>
							<view class="">
								主编：{{cous.chiefEditor||''}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<noData title="暂无课程信息"></noData>
			</view>
		</view>
		<view class="pos-center box box-tb box-align-center box-pack-center" v-else-if="isToken && isTourist">
			<noData title="还未绑定学校"></noData>
			<text style="color: #606266	;" @click="goBind">去绑定</text>
		</view>
		<view class="pos-center nodata box box-tb box-align-center box-pack-center" v-else>
			<view>登录查看更多内容</view>
			<u-button type="primary" @click="Login" :custom-style="customStyle">登录查看</u-button>
		</view>
		<bind-mobile :show="BindShow" @handleClose="handleClose"></bind-mobile>
		<view-tabbar></view-tabbar>
	</view>

</template>

<script>
	import mixinDevice from "@/common/mixins.js"
	export default {
		mixins: [mixinDevice],
		data() {
			return {
				customStyle: {
					marginTop: '67rpx',
					width: '260rpx',
					height: '90rpx',
					background: '#3541F3',
					boxShadow: '0rpx 8rpx 27rpx 0rpx rgba(53,65,243,0.21)',
					borderRadius: '20rpx'
				},
				data: ['课程任务', '实践任务'],
				current: 0,
				cous: null,
				user: uni.getStorageSync("user"),
				classList: [],
				classId: '',
				className: '',
				role: uni.getStorageSync("role"),
				currentSchool: uni.getStorageSync('currSchool'),
				bj: null,
				dclass: uni.getStorageSync('dclass'),
				cid: ''
			};
		},
		onLoad() {
			if (uni.getStorageSync('token') != '') {
				if (this.isTourist == false) {
					if (this.role == `stu`) {
						this.getStuClass()
					} else if (this.role == `tr`) {
						this.getClassList()
					} else {
						this.getKcrwInfo()
					}
				}

			}
		},
		onShow() {},
		methods: {
			//获取学生班级
			getStuClass() {
				let opts = {
					url: '/dclass/getStuClass',
					method: 'post'
				};
				let params = {
					userid: this.user.id
				};
				this.$api.post(opts, params).then(res => {
					this.dclass = res.data;
					uni.setStorageSync('dclass', res.data);
					this.stuKcrwList()
				})
			},
			//老师获取班级列表
			getClassList() {
				this.$api.post({
					url: '/dclass/trClassList'
				}, {
					trid: this.user.id
				}).then(res => {
					if (res.list.length == 0) {
						uni.reLaunch({
							url: '/pages/home/createClass'
						})
					} else {
						// 设置默认班级
						uni.setStorage({
							key: 'clazz',
							data: res.list[0],
							success: (resp) => {
								this.bj = res.list[0];

								this.getKcrwInfoTr(res.list[0])
							}
						})
					}
				})
			},
			// 获取老师课程
			getKcrwInfoTr(bj) {
				let params = {
					classid: bj.id,
					schoolid: this.user.schoolId
				};
				this.$api.post({
					url: '/yclasscoustask/classKcrwInfo'
				}, params).then(res => {
					if (res.code == 0) {
						if (res.info != null) {
							this.cous = res.info;
						}
					}
				})
			},
			//获取学生课程
			stuKcrwList() {
				uni.showLoading({
					title: '加载中',
					icon: 'none'
				})
				let params = {
					schoolid: this.user.schoolId,
					classid: this.dclass.id,
					userid: this.user.id
				};
				this.$api.post({
					url: '/yclasscoustaskrecords/stuKcrwList'
				}, params).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.cous = res.data;
					}
				})
			},
			changeClass(item) {
				this.classId = this.classList.filter(o => o.value == item)[0].value
				this.className = this.classList.filter(o => o.value == item)[0].label
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			getClassLists() {
				this.$api.post({
					url: '/dclass/trClassList'
				}, {
					trid: this.user.id
				}).then(res => {
					if (res.code == 0) {
						this.classId = res.list[0].id
						this.className = res.list[0].bjmc
						this.classList = res.list.map(res => {
							let item = {
								label: res.bjmc,
								value: res.id
							}
							return item
						});
					}

				})
			},
			//服务团队获取课程
			getKcrwInfo() {
				this.$api.post({
					url: '/yclasscoustask/schoolKcrwInfo'
				}, {
					schoolid: this.currentSchool.id
				}).then(res => {
					console.log(res, '服务团队')
					this.cous = res.info;
					res.list.forEach(item => {
						uni.setStorageSync('clazz', JSON.stringify(item))
					})
				})
			},
			//查看详情
			goDetail(item) {
				if (this.role == `stu`) {
					uni.navigateTo({
						url: "/stupageHome/kcView"
					})
					return
				} else if (this.role == `tr`) {
					console.log(1111, 'tr')
					uni.navigateTo({
						url: "/pageHome/kcView?id=" + item.id
					})
				} else {
					console.log(1111, '管理员')
					uni.navigateTo({
						url: "/pageHome/kcView?id=" + item.id
					})
				}
				// uni.navigateTo({
				// 	url: "/Public/CourseDetail/CourseDetail?id="+item.id
				// })
			},
			change(item, index) {
				this.current = index
			},
			close(index) {
				console.log(index);
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.auto {
		position: relative;
		background-color: #fff;
		height: calc(100% - 168rpx);
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.nav-bar {
		width: 438rpx;
		height: 72rpx;
		background: #edeff2;
		border-radius: 36rpx;

		.nav {
			width: 213rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			text-align: center;

			&.active {
				background-color: #fff;
				color: #2664FF;
				border-radius: 30rpx;
			}
		}
	}

	.list {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border: 1px solid #EAECF3;
		box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(175, 174, 196, 0.09);
		border-radius: 20rpx;
	}

	/deep/ .u-dropdown__menu__item__text {
		text-align: center;
	}
	.no-data {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		height: 260rpx !important;
	}
</style>